<template>
  <div>
    <div class="appBox">
      <div
        class="appBox-header"
        v-if="$scopedSlots.header || $scopedSlots.title"
      >
        <div class="appBox-back" v-if="!$scopedSlots.header">
          <div class="backLink" @click="goClose" v-if="isClose">
            <i class="icon el-icon-close"></i>
            <span>关闭</span>
          </div>
          <div class="backLink" @click="goBack" v-else>
            <i class="icon el-icon-back"></i>
            <span>返回</span>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div v-if="$scopedSlots.title">
            <slot name="title"/>
          </div>
        </div>
        <div v-if="$scopedSlots.header">
          <slot name="header"/>
        </div>
        <div v-if="$scopedSlots.headerBtn">
          <slot name="headerBtn"/>
        </div>
      </div>
      <div class="appBox-main">
        <div
          class="appBox-left column"
          :style="{width: widthLeft+'px'}"
          v-if="$scopedSlots.left"
        >
          <div
            class="appBox-title"
            :style="{paddingLeft: paddingLeft+'px',paddingRight: paddingLeft+'px'}"
            v-if="$scopedSlots.leftTitle || $scopedSlots.leftTitleL || $scopedSlots.leftTitleR"
          >
            <div class="flexAuto" v-if="$scopedSlots.leftTitle">
              <slot name="leftTitle"/>
            </div>
            <template v-else>
              <div>
                <slot name="leftTitleL"/>
              </div>
              <div>
                <slot name="leftTitleR"/>
              </div>
            </template>
          </div>
          <div class="appBox-center">
            <el-scrollbar>
              <div :style="{padding:paddingLeft+'px'}">
                <slot name="left"/>
              </div>
            </el-scrollbar>
          </div>
          <div
            class="appBox-foot"
            :style="{paddingLeft: paddingLeft+'px',paddingRight: paddingLeft+'px'}"
            v-if="$scopedSlots.leftFootL || $scopedSlots.leftFootR || $scopedSlots.leftFoot"
          >
            <div class="flexAuto" v-if="$scopedSlots.leftFoot">
              <slot name="leftFoot"/>
            </div>
            <template v-else>
              <div>
                <slot name="leftFootL"/>
              </div>
              <div>
                <slot name="leftFootR"/>
              </div>
            </template>
          </div>
        </div>
        <div class="appBox-main column">
          <div class="appBox-title" v-if="$scopedSlots.mainTitle  || $scopedSlots.mainTitleL || $scopedSlots.mainTitleR">
            <div class="flexAuto" v-if="$scopedSlots.mainTitle">
              <slot name="mainTitle"/>
            </div>
            <template v-else>
              <div>
                <slot name="mainTitleL"/>
              </div>
              <div>
                <slot name="mainTitleR"/>
              </div>
            </template>
          </div>
          <div class="appBox-center" :style="{background:bg}">
            <el-scrollbar>
              <div
                :style="{padding: padding+'px'}"
              >
                <slot/>
              </div>
            </el-scrollbar>
          </div>
          <div class="appBox-foot" v-if="$scopedSlots.mainFoot || $scopedSlots.mainFootL || $scopedSlots.mainFootR">
            <div class="flexAuto" v-if="$scopedSlots.mainFoot">
              <slot name="mainFoot"/>
            </div>
            <template v-else>
              <div>
                <slot name="mainFootL"/>
              </div>
              <div>
                <slot name="mainFootR"/>
              </div>
            </template>
          </div>
        </div>
        <div
          class="appBox-left column"
          :style="{width: widthRight+'px'}"
          v-if="$scopedSlots.right"
        >
          <div
            class="appBox-title"
            :style="{paddingLeft: paddingRight+'px',paddingRight: paddingRight+'px'}"
            v-if="$scopedSlots.rightTitleL || $scopedSlots.rightTitleR"
          >
            <div>
              <slot name="rightTitleL"/>
            </div>
            <div>
              <slot name="rightTitleR"/>
            </div>
          </div>
          <div class="appBox-center">
            <el-scrollbar>
              <div :style="{padding:paddingRight+'px'}">
                <slot name="right"/>
              </div>
            </el-scrollbar>
          </div>
          <div
            class="appBox-foot"
            :style="{paddingLeft: paddingRight+'px',paddingRight: paddingRight+'px'}"
            v-if="$scopedSlots.rightFootL || $scopedSlots.rightFootR || $scopedSlots.rightFoot"
          >
            <div class="flexAuto" v-if="$scopedSlots.rightFoot">
              <slot name="rightFoot"/>
            </div>
            <template v-else>
              <div>
                <slot name="rightFootL"/>
              </div>
              <div>
                <slot name="rightFootR"/>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div
        class="appBox-footer"
        v-if="$scopedSlots.footerLeft || $scopedSlots.footerRight"
      >
        <div>
          <slot name="footerLeft"/>
        </div>
        <div>
          <slot name="footerRight"/>
        </div>
      </div>
    </div>
    <div class="pup" v-if="$scopedSlots.pup">
      <slot name="pup"/>
    </div>
  </div>
</template>
<script>
export default {
  name: "AppBox",
  props: {
    title:{
      type:String,
    },
    bg:{
      default: () => {
        return '#f8f9fa';
      },
    },
    isClose:{
      type:Boolean,
      default: () => {
        return false;
      },
    },
    padding:{
      type:Number,
      default: () => {
        return 16;
      },
    },
    paddingLeft:{
      type:Number,
      default: () => {
        return 16;
      },
    },
    widthLeft:{
      type:Number,
      default: () => {
        return 220;
      },
    },
    widthRight:{
      type:Number,
      default: () => {
        return 220;
      },
    },
    paddingRight:{
      type:Number,
      default: () => {
        return 16;
      },
    },
    backUrl:{
      type:String,
    },
  }, // 获取父组件数据
  components: {

  },
  created() {

  },
  data() {
    return {

    };
  },
  methods: {
    //返回上一页
    goBack() {
      if (this.backUrl){
        this.$router.push({
          path:this.backUrl,
        })
      }else{
        this.$router.go(-1)
      }
    },
    //关闭
    goClose() {
      window.close()
    },

  },
  computed: {

  }
};
</script>
<style  lang="scss" scoped>
$border_color:#e6e6e6;
.appBox{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  .flexAuto{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  >*{
    &:not(:last-child){
      border-bottom: 1px #{$border_color} solid;
    }
    &:not(.appBox-main){
      height:44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
    }
    &.appBox-header{
      box-shadow: 0 4px 8px #00000008;
      .appBox-back{
        display: flex;
        align-items: center;
        justify-content: center;
        >*{
          margin-left: 0;
          &:not(:last-child){
            margin-right: 16px!important;
          }
        }
        .icon{
          font-size:18px;
        }
        .backLink{
          display: flex;
          align-items: center;
          cursor: pointer;
          >*{
            &:not(:last-child){
              margin-right: 8px!important;
            }
          }
          &:hover{
            color: #3f61f1;
          }
          span{
            font-weight: bold;
          }
        }
      }
    }
  }
  .appBox-main{
    flex: 1;
    display: flex;
    overflow: hidden;
    .column{
      display: flex;
      flex-direction: column;
      >*{
        &:not(:last-child){
          border-bottom: 1px #{$border_color} solid;
        }
        &:not(.appBox-center){
          min-height:48px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding:8px 16px;
        }
      }
    }
    &:not(.column){
      >*{
        border-right: 1px #{$border_color} solid;
      }
    }
    .appBox-center{
      flex: 1;
      overflow: hidden;
      position: relative;
    }
  }
}
</style>
